<script>
import quanIcon from "./quan.png"
import { handleMoney } from "../../../../utils"
import rightIcon from "./right.png"

export default {
	name: "couponBanner",
	methods: { handleMoney },
	data() {
		return {
			quanIcon,
			rightIcon,
		}
	},
	emits: ["handlePopupOpen"],
	props: {
		currentSelect: {
			type: Object,
			default: null,
		},
		noCoupon: {
			type: Boolean,
			default: false,
		},
	},
}
</script>

<template>
	<view class="coupon-banner" v-if="!noCoupon">
		<view class="left block">
			<image class="icon" :src="quanIcon"></image>
			<view class="text">优惠券</view>
		</view>
		<view class="right block" @click="$emit('handlePopupOpen')">
			<view class="coupon-name"
			>{{ currentSelect ? currentSelect.couponName : "未选择" }}
			</view>
			<!--			减免价格-->
			<template v-if="currentSelect">
				<!--				价格减免策略-->
				<view
					class="discount-the-price"
					v-if="currentSelect.priceStrategy === '0'"
				>-￥{{ handleMoney(currentSelect.price) }}
				</view>
				<!--				折扣策略-->
				<view
					class="discount-the-price"
					v-else-if="currentSelect.priceStrategy === '1'"
				>{{ currentSelect.discountRate * 10 }} 折
				</view>
				<!--				满减-->
				<view
					class="discount-the-price"
					v-else-if="currentSelect.priceStrategy === '2'"
				>满 {{ handleMoney(currentSelect.fullYuan) }} 减 {{ handleMoney(currentSelect.price) }}
				</view>
			</template>
			<image class="right-arrow" :src="rightIcon"></image>
		</view>
	</view>
</template>

<style scoped lang="scss">
.coupon-banner {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	height: 80rpx;
	border-radius: 40rpx;
	border: 4rpx solid var(--border-color);
	
	.block {
		display: flex;
		align-items: center;
	}
	
	> .left {
		.icon {
			width: 35rpx;
			height: 35rpx;
		}
		
		.text {
			color: #333;
			font-size: 28rpx;
			font-weight: 500;
			margin-left: 10rpx;
		}
	}
	
	> .right {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		margin-left: 30rpx;
		
		.coupon-name {
			color: #333;
			font-size: 28rpx;
			font-weight: 500;
		}
		
		.discount-the-price {
			color: red;
			font-size: 26rpx;
			font-weight: 500;
			margin-left: 20rpx;
		}
		
		.right-arrow {
			width: 12rpx;
			height: 20rpx;
			margin-left: 20rpx;
		}
	}
}
</style>
